import React, {Component} from 'react';
import Swiper from "swiper";
import {Navigation, Pagination} from "swiper/modules";
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

class App extends Component {
    state = {
        list: []
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                list: [111,222,333]
            }, () => {
                new Swiper('.swiper', {
                    modules: [Navigation, Pagination],
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                })
            })
        }, 1000)
    }

    // 以上2中方法都可以实现异步渲染轮播组件
    componentDidUpdate(prevProps, prevState, snapshot) {
        // new Swiper('.swiper', {
        //     modules: [Navigation, Pagination],
        //     pagination: {
        //         el: '.swiper-pagination'
        //     },
        //     navigation: {
        //         nextEl: '.swiper-button-next',
        //         prevEl: '.swiper-button-prev'
        //     }
        // })
    }

    render() {
        return (<div>
            <div className="swiper" style={{height: "300px", width: "600px", backgroundColor: "yellow"}}>
                <div className="swiper-wrapper">
                    {
                        this.state.list.map(item =>
                            <div className="swiper-slide" key={item}>{item}</div>
                        )
                    }
                </div>
                <div className="swiper-pagination"></div>

                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>
        </div>);
    }
}

export default App;